<template>
  <div>
    <el-breadcrumb rumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="getCommodityInfo.query"
            placeholder="请输入内容"
            class="searchInput"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="isSearchInputContent"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" round @click="addCommodityListGoods"
            >添加商品</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-row>
        <el-table :data="commodityListGoods" style="width: 100%" border>
          <el-table-column label="#" type="index" :index="1"> </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="900">
          </el-table-column>
          <el-table-column prop="goods_price" label="商品价格">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量">
          </el-table-column>
          <el-table-column prop="add_time" label="创建时间" width="200">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteThisCommodity(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getCommodityInfo.pagenum"
          :page-sizes="[50, 100, 200, 400]"
          :page-size="getCommodityInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="commodityListTotal"
        >
        </el-pagination>
      </el-row>
      <!-- 修改商品数据弹出框 -->
      <!-- <el-dialog
        title="提示"
        :visible.sync="alterDialogVisible"
        width="50%"
        @close="closeAlterDialog"
      >
        <el-form
          :model="alteralterDialogRuleForm"
          :rules="alteralterDialogrules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="alteralterDialogRuleForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input v-model="alteralterDialogRuleForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input
              v-model="alteralterDialogRuleForm.goods_weight"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelAlterDialog">取 消</el-button>
          <el-button type="primary" @click="putAlterDialog">确 定</el-button>
        </span>
      </el-dialog> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 请求商品分类数据列表参数
      getCommodityInfo: {
        query: "",
        pagenum: 1,
        pagesize: 50,
      },
      // 获取到的商品分类数据列表
      commodityListGoods: [],
      commodityListTotal: 0,
      commodityListPagenum: "",
      // 添加商品分类数据表单
    };
  },
  methods: {
    // 请求商品分类数据
    async getCommodityList() {
      const { data: res } = await this.$http({
        url: "/goods",
        method: "get",
        params: {
          ...this.getCommodityInfo,
        },
      });
      if (res.meta.status !== 200)
        return this.$message.error("获取参数失败，请重试");
      // this.$set(this.commodityList, "goods", res.data.goods);
      this.commodityListGoods = res.data.goods;
      this.commodityListTotal = res.data.total;
      this.commodityListPagenum = res.data.pagenum;
      this.commodityListGoods.forEach((item) => {
        item.add_time = this.dayjs(item.add_time).format(
          "YYYY年MM月DD日HH时MM分"
        );
      });
    },
    // 分页控件控制每页显示
    handleSizeChange(val) {
      this.getCommodityInfo.pagesize = val;
      this.getCommodityList();
    },
    // 分页控件切换页数
    handleCurrentChange(val) {
      this.getCommodityInfo.pagenum = val;
      this.getCommodityList();
    },
    // 搜索框功能
    isSearchInputContent() {
      if (this.getCommodityInfo.query == "") return;
      this.getCommodityInfo.pagenum = 1;
      this.getCommodityList();
    },
    // 删除商品
    async deleteThisCommodity(row) {
      const result = await this.$confirm(
        "此操作将永久删除该商品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (result !== "confirm") return this.$message.info("已取消删除");
      const { data: res } = await this.$http({
        url: `goods/${row.goods_id}`,
        method: "delete",
      });
      if (res.meta.status !== 200) return this.$message.error(this.meta.msg);

      // this.commodityListGoods = this.commodityListGoods.filter((val) => {
      //   return val.goods_id !== row.goods_id;//实现不请求数据刷新页面
      // });
      // this.commodityListTotal--;
      this.getCommodityList();
      this.$message.success(res.meta.msg);
    },
    // 添加商品
    addCommodityListGoods() {
      this.$router.push("/home/goods/add");
      this.isAddcommodity = false;
    },
    addCommodity() {},
  },
  created() {
    this.getCommodityList();
  },
};
</script>

<style lang="less" scoped>
.searchInput {
  margin-bottom: 15px;
}
</style>
